<!--
 * @Author: dxy 1776566541@qq.com
 * @Date: 2022-09-06 16:43:26
 * @LastEditors: dxy 1776566541@qq.com
 * @LastEditTime: 2022-09-07 15:10:37
 * @FilePath: \deng\src\views\home\Banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="swiper" ref="swiper">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="img in swiperimgList"
        :key="img.carousel_id"
      >
        <img :src="$target + img.imgPath" alt="" />
      </div>
    </div>

    <div class="swiper-pagination"></div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
export default {
  name: 'DBanner',
  watch: {
    swiperimgList: {
      immediate: true,
      handler(newval) {
        if (!newval.length) return
        this.$nextTick(() => {
          new Swiper(this.$refs.swiper, {
            autoplay: {
              delay: 4000,
              disableOnInteraction: false
            }, //自动轮播

            loop: true, // 无限轮播
            // 小圆点
            pagination: {
              el: '.swiper-pagination',
              clickable: true // 可以点击跳转
            },
            // 左右箭头
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          })
        })
      }
    }
  },
  data() {
    return {
      swiperimgList: [] //轮播图
    }
  },
  mounted() {
    this.$axios
      .post('/api/resources/carousel', {})
      .then((res) => {
        this.swiperimgList = res.data.carousel
      })
      .catch((err) => {
        return Promise.reject(err)
      })
  }
}
</script>

<style lang="less" scoped>
.swiper {
  width: 1225px;
}
.swiper-slide {
  width: 100%;
  height: 527px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
</style>
